<template>
  <el-dialog
    :show-close="true"
    :visible.sync="forgetPwdDialog"
    :before-close="close"
    :append-to-body="true"
    :close-on-click-modal="false"
    :title="title"
    width="35%"
  >
    <el-form v-show="showUserInfo" ref="userCheckForm" :model="user" :rules="rules" status-icon label-width="100px" class="setting-box">
      <el-form-item label="用户账号" prop="userCode">
        <el-input v-model="user.userCode" auto-complete="off"/>
      </el-form-item>

      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="user.mobile" auto-complete="off"/>
      </el-form-item>
    </el-form>

    <el-form v-show="showVerCode" ref="verCodeForm" :model="ver" :rules="rules" status-icon label-width="100px" class="setting-box">
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="ver.mobile" disabled auto-complete="off"/>
      </el-form-item>

      <el-form-item label="验证码" prop="verificationCode">
        <el-input v-model="ver.verificationCode" style="width:73%;" auto-complete="off"/>
        <el-button :disabled="btnStatus" type="primary" style="width:55%;" @click="sensValidation">{{ content }}</el-button>
      </el-form-item>
    </el-form>

    <el-form v-show="showChangePwd" ref="pwdForm" :model="pwds" :rules="rules" label-width="100px" class="setting-box">
      <el-form-item label="密码" prop="pass">
        <el-input v-model="pwds.pass" type="password" auto-complete="off"/>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPass">
        <el-input v-model="pwds.checkPass" type="password" auto-complete="off"/>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer" style="text-align:center">
      <el-button @click="close">取 消</el-button>
      <el-button v-if="showUserInfo" type="primary" @click="checkUserInfo">下一步</el-button>
      <el-button v-if="showVerCode" type="primary" @click="checkVerCode">下一步</el-button>
      <el-button v-if="showChangePwd" type="primary" @click="modifyPwd">确 认</el-button>
    </div>

  </el-dialog>
</template>

<script>
import {
  validateUserInfo,
  sendForgetPwdMessage,
  CheckSmsVertifyCode,
  changePassword
} from '@/api/admin/auth/userInfo'

import { ispassWD } from '@/utils/validate'

export default {
  name: 'ForgetPwdDialog',
  props: {
    forgetPwdDialog: {
      type: Boolean
    }
  },
  data() {
    // 校验用户账号
    const validateUserCode = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户账号'))
      } else {
        callback()
      }
    }

    // 校验验证码
    const validateVerificationCode = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入验证码'))
      } else {
        callback()
      }
    }

    // 校验手机号
    const validateMobile = (rule, value, callback) => {
      const pattern = /^1[2-9]\d{9}$/
      if (value === '') {
        callback(new Error('请输入手机号'))
      } else if (!pattern.test(value)) {
        callback(new Error('请输入正确的手机号码'))
      } else {
        callback()
      }
    }

    // 校验新密码
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else if (!ispassWD(value)) {
        callback(new Error('密码必须包含数字、字母、字符至少两种,长度大于等于8位'))
      } else {
        if (this.pwds.checkPass !== '') {
          this.$refs.pwdForm.validateField('checkPass')
        }
        callback()
      }
    }

    // 校验第二次和第一次输入的密码是否一致
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.pwds.pass) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }

    return {
      showUserInfo: true,
      showVerCode: false,
      showChangePwd: false,
      title: '忘记密码——账号验证',
      content: '发送验证码', // 按钮里显示的内容
      totalTime: 60, // 记录具体倒计时时间
      btnStatus: false,
      user: {
        userCode: '',
        mobile: '',
        verificationCode: ''
      },
      ver: {
        mobile: '',
        verificationCode: ''
      },
      pwds: {
        pass: '',
        checkPass: ''
      },
      rules: {
        userCode: [{
          validator: validateUserCode,
          trigger: 'blur',
          required: true
        }],
        mobile: [{
          validator: validateMobile,
          trigger: 'blur',
          required: true
        }],
        verificationCode: [{
          validator: validateVerificationCode,
          trigger: 'blur',
          required: true
        }],
        pass: [{
          validator: validatePass,
          trigger: 'blur',
          required: true
        }],
        checkPass: [{
          validator: validatePass2,
          trigger: 'blur',
          required: true
        }]
      }
    }
  },
  methods: {
    countDown() {
      let currentTime = this.totalTime
      this.clock = window.setInterval(() => {
        currentTime--
        this.content = currentTime + 's后重新发送'
        if (currentTime === 0) {
          console.log(this.clock)
          window.clearInterval(this.clock)
          this.btnStatus = false
          this.content = '发送验证码'
        }
      }, 1000)
    },
    sensValidation() { // 发送验证码
      this.countDown()
      this.btnStatus = true
      sendForgetPwdMessage(this.ver.mobile).then(res => {

      }).catch(err => {
        window.clearInterval(this.clock)
        this.content = '发送验证码'
        this.btnStatus = false
      })
    },
    checkUserInfo() {
      this.$refs['userCheckForm'].validate((valid) => {
        if (valid) {
          const params = {
            userCode: this.user.userCode,
            mobile: this.user.mobile
          }
          validateUserInfo(params).then(res => {
            this.title = '忘记密码——发送验证码'
            this.showUserInfo = false
            this.showVerCode = true
            this.showChangePwd = false
            this.ver.mobile = this.user.mobile
          }).catch(err => {
          })
        } else {
          return false
        }
      })
    },
    checkVerCode() {
      this.$refs['verCodeForm'].validate((valid) => {
        if (valid) {
          CheckSmsVertifyCode(this.ver.mobile, this.ver.verificationCode).then(res => {
            window.clearInterval(this.clock)
            this.content = '发送验证码'
            this.btnStatus = false

            this.title = '忘记密码——修改密码'
            this.showUserInfo = false
            this.showVerCode = false
            this.showChangePwd = true
          }).catch(err => {
            this.ver.verificationCode = ''
          })
        } else {
          return false
        }
      })
    },
    modifyPwd() {
      this.$refs['pwdForm'].validate((valid) => {
        if (valid) {
          const param = {
            password: this.pwds.pass,
            newPassword: this.pwds.checkPass,
            userCode: this.user.userCode
          }
          changePassword(param).then(res => {
            this.$message({
              type: 'success',
              message: '密码修改成功  '
            })
            this.close()
          }).catch(err => {
          })
        } else {
          return false
        }
      })
    },
    close() {
      this.$refs['userCheckForm'].resetFields()
      this.$refs['verCodeForm'].resetFields()
      this.$refs['pwdForm'].resetFields()
      this.$emit('update:forgetPwdDialog', false)
    }
  }
}
</script>

<style scoped>

</style>
